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TUTORIAL: Walking Animation in Flash 


FLASHMXProfessional 
2004 


As CGA students, most of you have probably encountered a Flash animation while surfing 
the web. It might have been a flashy ad banner, an interactive game, the layout of a slick 
website, or a quirky animation that a friend emailed to you. It is obvious that the Internet 
industry has embraced Flash as a powerful tool. 


Because of its easy usability, novice users could make a decent Flash animation without 
extensive training. Unfortunately, most of these users do not know basic animation 
techniques. W ith this tutorial, you will quickly learn how to create above-average 
animations using Flash and your knowledge of the animation principles. 


To fully understand the animation methods of Flash, we will be animating a figure doing 
a walk cycle. 
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Required Skills & Materials 


To fully understand the material in this tutorial, you need to have taken 
the G PH 213 course or have had experience using Flash. Knowing basic 
animation principles is helpful but not needed. 


The software used in this tutorial is Macromedia Flash MX Professional 2004. 
You may use other versions such as Macromedia Flash MX. However, minor 
will be different as shown from the tutorial. 


The hardware requirements for the software is: 


For W indows computers: 
600 MHz Intel Pentium Ill processor or equivalent 
W indows 98 SE (4.10.2222 A), W indows 2000, or W indows XP 
128 MB RAM (256 MB recommended) 
347 MB available disk space 


For Macintosh computers 
500 MHz PowerPC G3 processor 
MacOS X 10.2.8 and later, 10.3.4, 10.4 
128 MB RAM (256 MB recommended) 
280 MB available disk space 


As with any other graphics software, it is recommended to have higher 
specifications than the ones listed above. 


Animation in Flash 
There are three different ways to animate in Flash. The first is called Frame by 
Frame Animation which mimics traditional hand cel drawing. In this way, you 
manually create or manipulate the images on every frame. This is tedious and 
requires a lot of hard work, but you get the most control. 


The second is called Shape Tween. This takes a shape on one keyframe and morphs 
it into the shape on the next keyframe. You get the least amount of control but the 
results are interesting. 


The third is called Motion Tween. This requires the graphics to be converted into 
Symbols: Movie Clip, Button, or Graphic. Symbols can be animated by using 
the Transformation Tools in the ToolBox. Graphic properties such as Brightness, 


Tint, or Alpha (transparency) can also be animated. 
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We are going to use the Motion Tween method in this exercise. A walking figure has 
interconnected limbs that can easily be animated using the transformation tools, i.e., 
the Move and Rotate tools. Motion tweening will only require us to fill in the main 
keyframes. Tweening will fill in the “in-between” frames. 


Here's a look at our animation. The frames below have nine keyframes and in- 
between frames 


PADUA 


Frames of Walk Cycle Animation 


Storyboarding 


Before touching the computer, what you first want to do is prepare a storyboard of 
your animation. For this animation, the important thing is to draw the main keyframes 
of the walking figure. We are going to do a walk cycle. This covers all the different 
positions a body will take when taking two steps. In a cycle, it is important to have 
the first frame be the same as the last frame. 


AR VARADER 


CONTACT Rea wien Pom 


Quick Storyboard Sketch 


HIGH POINT CONTACT 
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Designing Movable Parts 
From storyboarding, we now Know the keyframes we have to do. The next step is to 


create the body parts of our walking figure in Flash. 


- Start a new document in Flash. 
We are going to separate the body parts in different layers for better 


organization. 


Note: Feel free to use any tools to make the body parts. Don't restrict yourself 
to the drawing tools in Flash. For example, an imported image of a head 


would be fine. 


- Using the Circle tool, draw a 
round shape for the head. 


- Rename the layer “head” 


- Select the circle by selecting the 
layer. This will ensure that all 
parts in that layer 
are selected. 
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- Right-click and “Convert to Symbol...” 


- Name it “head” and choose the 
“Graphic” option. 


- Press OK. 


Converting an element into a symbol allows that element to use Flash’s animation 
features, 
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Do the same for the other parts: body, left upper arm, right upper arm, left lower 
arm, right upper arm, left thigh, right thigh, left leg, right leg. 

ee to add a new layer for each body part and convert to a “Graphic” 
symbol. 
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Hierarchies & Pivot Points 


Once you have finished all the parts, you have to Tutorial* wakt 
rearrange the layers into their proper positions. For $- | scene 1 
example, the right limbs have to be on one side of : 
the body and head. i w Timeline 


LA right lowarm 
LA right arm 
LP right leg 
right thigh 
DA body 
[A left thigh 
left leg 
Next, we have to move the pivot points of the body FF left arm 
parts in their proper positions. This will ensure that O lef lowarm 
the body parts will move correctly during the DD head 
animation. 
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- Click on the Free Transform Tool and select a 
body part. The circle in the middle is the pivot 
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point. Your Timeline should look like this. 


- Figure out the pivot point of each body part. For 
example, the lower arm will have its pivot point 
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The white 
circle is the C 
pivot point. © 
Drag it to 
move it NN 
, image. 


around. 
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Move the pivot points 
in their proper places 
as shown in the left 


ae oe GL Now it's time to arrange the body parts into the first 
E @ farts from the storyboard. Use the Free Transform Tool 
for this. 


After you have the first position done, put a guide to 
indicate the ground and the center of the figure. 


To add a guide, click View, 
Rulers to show the ruler. From 
the top ruler, click and drag 
own to get a guide line. 


First keyframe 


Animating Keyframes 
Setting Keyframes 


Now that we have our first position set up, we can start the animation process. 
We need to change our figure to its second position, i.e., the second keyframe. 


- First, set the second keyframe atthe 10° pmm 


frame. To do this, go onthe Timeline and f- | Ss: 
select and drag the boxes on the 10" Sw 
column. Be sure to select all the layers. Cine. ml 
a a 
; i right leg 73 My 
- Right-click and choose Insert Keyframe. Lemme aa CRESIEN NG 
Eaa P aii Tana 
You now have ten frames of animation. W stha D | 
arm $ Insert Blank Keyframe 
Now for some movement... D Eeft kwam -og | csr keyrene 
i ee | Convert to keyframes 
Convert to Blank Keyframes 
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Positioning Parts 


Second keyframe 


Motion Tweening 


W ith the second position set, 
we can now add tweening. 


Tweening will fill in the in- 
between frames from the 
first keyframe to the second 
keyframe. 


To do this, on the Timeline: 

- Select and drag a place 
in the middle of the 
keyframes. Be sure to select 
all layers. 

- Right-click and choose 
Create Motion Tween. The 
space between the 
keyframes should turn blue 
and have an arrow in them. 

- Drag the time slider 
between the keyframes to 
make sure that the frames 
are correctly animated. 
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W ith the second keyframe set, we can 
now change our figure’s position. First, 
select the number 10 on the Timeline 
to indicate that you are now working 
onthe 10" frame. 


As before, use the Free Transform Tool 
to move the body parts. DO NOT move 
the pivot points. Make sure that the 
feet are aligned with the ground and 
the center of the body is aligned with 
the center guide. 


File Edit View Insert Modify Text Commands Control Window Help 
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Testing & Tweaking 


- Do the same for each keyframe. 
- Press ENTER to let the animation run and see if there are any tweaks you can 
do to improve it. 


Here are the keyframes from 1 - 8. 


5 
1st - 8th keyframes 


Final Steps 


For the last keyframe, you do not need to move the positions manually. Since we are 
making a walk cycle, it is important that the first and last frame of the animation are 
exactly the same. 


- Go back to the 
first frame, select 
the first keyframe 
of all layers. 

- Right-click and 
Copy Frames. 

- Now go to the end 
of the frames, at 
the 80" frame, 
select and drag al 
layers in this 
frame. 

- Right-Click, Paste 
Frames. 

- Add the tweening 
by selecting the 
middle frames 
between the 70" 
and 80" frames, 
Right-Click, Create 
Motion Tween. 


Finished production should look like this 
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To check your animation, hold down CTRL + ENTER to see the shockwave file of your 
animation. 


To make the speed of your animation faster, click the white space of the document. The 
Properties section is located at the bottom part of the window. The Frame Rate indicates 
the amount of frames per second. The higher the number, the faster the speed of the 

animation. 


Flash In O ther Areas 


Besides animation, Flash software can be used in different ways. 

Interactive websites use Flash to create a slick and modern look. Having a Flash-based 
website leaves a professional impression on a viewer. 

Flash is also used on games and short films that are found on numerous entertainment 
websites. It is most extensively used as ad banners. They are easy to make and the file size 
is small. 

As you can see, Flash is a powerful tool in animation as well as in other parts of the 
Internet. Companies that are web-based or have websites require employees to have 
Flash experience. It is also a good way to practice your animation skills. 
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Appendix A - Shortcut Keys 


Commands Keys 

Convert to Symbol F8 

Keyframe F6 

Clear Keyframe Shift+F6 

Blank Keyframe F7 

Play Enter 

Test M ovie Ctrl+ Enter 
Transform Ctrl+T 

Toggle Rulers O n/ O ff Ctril+Alt+Shift+R 


Toggle Show GuidesOn/Off Ctri+; 


Appendix B - Links 


Flash Kit (www.flashkit.com) - Extensive site that has tutorials and fla files. 
moock.org(www.moock.org/ webdesign/ flash) - Good site for actionscripting. 
philetg.tripod.com - Author's website that includes flash animations. 

Macromedia Flash(www.macromedia.com/ software/ flash) - Macromedia's website 
for Flash. Includes updates, tutorials, forum. 
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